import React from 'react';
import { Spin } from 'antd';
import { isEqual, isEmpty } from 'lodash';
import {WeaTools, WeaErrorPage, WeaTable, WeaLocaleProvider} from 'ecCom';
let Base64 = ecCom.WeaTools.Base64;
const getLabel = WeaLocaleProvider.getLabel;
const { ls } = WeaTools;
import EHeader from '../common/EHeader';
import FooterMore from "../common/FooterMore";
import {formatData, NoRightCom} from '../../util/common';
//元素组件
class UnreadDocs extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            edata: null,
            refresh: false,
            width: 0,
        }
        this.handleEData = this.handleEData.bind(this);
        this.handleRefresh = this.handleRefresh.bind(this);
        this.handleDelete = this.handleDelete.bind(this);

        if(window.element_unReadDoc_refresh && typeof window == 'object'){
            window.element_unReadDoc_refresh[props.config.params.eid] = this.handleRefresh.bind(this);
        }else{
            let obj = {};
            obj[props.config.params.eid] = this.handleRefresh.bind(this);
            window.element_unReadDoc_refresh = obj
        }
    }
    handleDelete(){
        this.setState({
            edata: null,
        });
        ls.set('edata-'+this.props.config.params.eid, null);
    }
    handleRefresh(){
        this.setState({
            refresh: true,
        });
        this.handleEData(this.props.config.params);
    }
    handleEData(params){
        const { eid, api } = params;
        const loadContent = () => {
            let width = $("#content_view_id_"+eid).width() || 0;
            this.setState({
                edata: ls.getJSONObj('edata-'+eid),
                width,
            });
            WeaTools.callApi(api || '/api/portal/element/view', 'POST', {...params}).then(result=> {
                let more = result.more || "";
                window.elements_more_params[eid] = {isRouteUrl: true, paramsStr: "&jsonstr=" + Base64.encode(more.toString())};
                ls.set('edata-'+eid, result);
                this.setState({
                    edata: result,
                    refresh: false,
                });
            });
        }
        if($("#content_view_id_"+eid)[0]){
            loadContent();
        }else{
            let timer = setTimeout(()=>{
                loadContent();
                clearTimeout(timer);
            },100);
        }
    }
    componentDidMount(){
        this.handleEData(this.props.config.params);
    }
    componentWillReceiveProps(nextProps){
        const { item, params, isHasRight } = this.props.config;
        const config = { item, params, isHasRight };
        const _config = {
            item: nextProps.config.item,
            params: nextProps.config.params,
            isHasRight: nextProps.config.isHasRight,
        };
        if(!isEqual(config, _config) || nextProps.config.isRender){
            this.handleEData(nextProps.config.params);
        }
    }
    shouldComponentUpdate(nextProps, nextState){
        const { item, params, isHasRight } = this.props.config;
        const config = { item, params, isHasRight };
        const _config = {
            item: nextProps.config.item,
            params: nextProps.config.params,
            isHasRight: nextProps.config.isHasRight,
        };
        return !isEqual(this.state, nextState) || !isEqual(config, _config)
    }
    render() {
        const { edata, refresh, width } = this.state;
        const { config, fontSizeMp } = this.props;
        if(!config || !edata) return <div/>;
        const {esetting={} }= edata;
        const { isHasRight, item } = config;
        const { eid, ebaseid, content, header, contentview, style } = item;
        const { style: style1= {} } = contentview;
        let EContentHtml = <div/>;
        if(isHasRight){
            if(!isEmpty(edata)) EContentHtml = <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@jyjohg`} columns = {formatData(edata.data[0], {eid: eid, ebaseid: ebaseid, ...esetting})} showHeader={esetting.showHeader == '1'} pagination={false} dataSource={edata.data} size="small"/>;
        }else{
            EContentHtml = <NoRightCom ecId={`${this && this.props && this.props.ecId || ''}_NoRightCom@q3zq2q`}/>
        }
        return <div className="item"
                    style={style}
                    id={`item_${eid}`}
                    data-eid={eid} data-ebaseid={ebaseid}
                    data-needRefresh={item.needRefresh}
                    data-cornerTop={item.cornerTop}
                    data-cornerTopRadian={item.cornerTopRadian}
                    data-cornerBottom={item.cornerBottom}
                    data-cornerBottomRadian={item.cornerBottomRadian}>
            <EHeader ecId={`${this && this.props && this.props.ecId || ''}_EHeader@vfdjwt`} config={config} handleRefresh={this.handleRefresh} handleDelete={this.handleDelete} fontSizeMp={fontSizeMp}/>
            <div className="setting" id={`setting_${eid}`}> </div>
            <div className="content" id={`content_${eid}`} style={{width:'auto',_width:'100%'}}>
                <div className="content_view" id={`content_view_id_${eid}`} style={{height: style1.height}}>
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@zj9b3x`} spinning={refresh}>{EContentHtml}</Spin>
                </div>
                <div style = {{textAlign:'right'}} id={`footer_${eid}`}><FooterMore ecId={`${this && this.props && this.props.ecId || ''}_FooterMore@stvzyx`} config={this.props.config}/></div>
            </div>
        </div>;
    }
}

class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
        return ( <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@rwwdah`} msg = { hasErrorMsg ? this.props.error :getLabel(385218,"对不起，该页面异常，请联系管理员！")}/>
        );
    }
}
UnreadDocs = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(UnreadDocs);
export default UnreadDocs;



